<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>印象石板河</title>
		<link href="/css/styleShibanhe.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<style>
			.content{min-width: 1300px;overflow-x:auto;}
			.banner{width: 100%;height: 484px;background: url(/img/banner2.png) no-repeat center center;background-size: 1920px 100%;position: relative;}
			.bannerArea{width: 1190px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 60px;text-align: right;z-index: 2;}
			.bannerArea p{font-size: 35px;color: #fff;line-height: 1.4;font-weight: 200;text-transform:uppercase;}
			.nav{width: 100%;height: 48px;background: url(/img/nav.png) no-repeat center center;background-size: 1920px 48px;}
			.nav p{width: 1260px;margin: 0 auto;display: flex;align-items: center;height: 48px;color: #000000;}
			.nav p img{margin-right: 10px;}
			
			.main{width: 100%;background: url(/img/back2.png) no-repeat;background-size: 1920px 1346px;background-position: center bottom;padding-top: 1px;}
			.title{height: 81px;display: block;margin: 65px auto 20px;}
			.tabBox{height: 35px;width: 1260px;background: url(/img/tabBack2.png) no-repeat;background-size: 1260px 1px;background-position: center center;margin:0 auto 60px;}
			.tabUl{padding-left: 28px;display: flex;justify-content: center;}
			.tabUl li{width: 186px;height: 35px;line-height: 35px;color: #50ac53;text-align: center;background: url(/img/active2.png) no-repeat;margin-right: 28px;cursor: pointer;font-size: 16px;}
			.tabUl li span{color: #0e62a7;}
			.tabUl li.active,.tabUl li:hover{background: url(/img/active1.png) no-repeat;color: #fff;}
			.tabUl li.active span,.tabUl li:hover span{color: #fff;}
			
			.spot{width: 1240px;overflow: hidden;margin: 0 auto 48px;padding-left: 20px;}
			.spotBox{width: 380px;height: 303px;float: left;position: relative;margin-right: 40px;}
			.spotImg{width: 100%;height: 100%;}
			.spotBox:nth-of-type(1){margin-bottom: 40px;}
			.spotBox:nth-of-type(2){margin-bottom: 40px;}
			.spotBox:nth-of-type(3){margin-bottom: 40px;}
			.spotBox:nth-of-type(3n){margin-right: 0;}
			.spotBox p{height: 54px;position: absolute;left: 0;bottom: 0;line-height: 54px;background: rgba(0,0,0,0.5);width: 100%;font-size: 16px;color: #fff;display: flex;align-items: center;}
			.spotBox p img{margin: 0 10px 0 25px;}
			.spotHover{width: 90%;height: 90%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 16px;color: #fff;align-items: center;justify-content: center;background: url(/img/line6.png) no-repeat center center;background-color: rgba(0,0,0,0.4);background-size: 70% 70%;display: none;}
			.spotBox:hover p{display: none;}
			.spotBox:hover .spotHover{display: flex;}
			.language{position: absolute;top:30px;right: 30px;font-size: 12px;z-index: 222}
			.language span{margin: 0 3px;color: #ccc;}
			.language .cur{color: #fff;}
			.nav a{color: black}
			
		</style>
		<div class="content">
			<div class="banner">
				<div class="language">
					<span class="cur">中文</span>
					<span>English</span>
					<span>日本語</span>
					<span>한국어</span>
				</div>
				<div class="head">
					<div class="headLeft cur">
						<a href="/">网站首页</a>
					</div>
					<div class="headLeft">
						<a href="/walking">走进景区</a>
					</div>
					<div class="headLeft">
						<a href="/impression">印象景区</a>
					</div>
					<div class="headLeft">
						<a href="/play">玩转景区</a>
					</div>
					<img class="logo" src="/img/logo.jpg" style="width:180px;height:172px"/>
					<div class="headRight">
						<a href="/shopping">景区周边</a>
					</div>
					<div class="headRight">
						<a href="/dynamic">景区动态</a>
					</div>
					<div class="headRight">
						<a href="/strategy">旅游攻略</a>
					</div>
					<div class="headRight">
						<a href="/service">客户服务</a>
					</div>
				</div>
				<div class="bannerArea">
					<p>> 印象石板河</p>
					<p>impression&nbsp;·&nbsp;SHI BAN HE</p>
				</div>
			</div>
		
			<div class="nav">
				<p><img src="/img/location.png"/>您的位置：<a href="/">网站首页&nbsp;></a>&nbsp<a href="#" class="siteChange">印象石板河</a></p>
			</div>
		
			<div class="main">
				<img class="title" src="/img/title4.png" />
				<div class="tabBox">
					<ul class="tabUl">
						<li class="active">印象<span>石板河</span></li>
						<li>石板河<span>文化</span></li>
					</ul>
				</div>
				<div class="spot">
					<!--<div class="spotBox">
						<img class="spotImg" src="/img/img16.png" />
						<p><img src="/img/eyes.png" />石板河景区</p>
						<div class="spotHover">石板河景区</div>
					</div>
					<div class="spotBox">
						<img class="spotImg" src="/img/img17.png" />
						<p><img src="/img/eyes.png" />石板河景区</p>
						<div class="spotHover">石板河景区</div>
					</div>
					<div class="spotBox">
						<img class="spotImg" src="/img/img18.png" />
						<p><img src="/img/eyes.png" />石板河景区</p>
						<div class="spotHover">石板河景区</div>
					</div>
					<div class="spotBox">
						<img class="spotImg" src="/img/img19.png" />
						<p><img src="/img/eyes.png" />石板河景区</p>
						<div class="spotHover">石板河景区</div>
					</div>
					<div class="spotBox">
						<img class="spotImg" src="/img/img20.png" />
						<p><img src="/img/eyes.png" />石板河景区</p>
						<div class="spotHover">石板河景区</div>
					</div>
					<div class="spotBox">
						<img class="spotImg" src="/img/img21.png" />
						<p><img src="/img/eyes.png" />石板河景区</p>
						<div class="spotHover">石板河景区</div>
					</div>-->
				</div>
				
				<div class="box">
					<div id="pagination" class="page fl"></div>
				</div>

				<div class="footer">
					<div class="footerTop">
						<span id="link">友情链接：</span>
						<!--<a href="#"><img src="/img/icon2.png" /></a>-->
					</div>
					<ul class="footUl">
						<li><a href="/">网站首页</a></li>
						<li><a href="/walking">走进石板河</a></li>
						<li><a href="/impression">印象石板河</a></li>
						<li><a href="/play">玩转石板河</a></li>
						<li><a href="/surrounding">景区导览</a></li>
						<li><a href="/dynamic">景区动态</a></li>
						<li><a href="/strategy">旅游攻略</a></li>
						<li><a href="/service.html">客户服务</a></li>
					</ul>
					<p><span id="companyName">安徽省石板河旅游发展有限公司</span>　版权所有　 <span id="copyright">Copyright © 2020 All Right Reserve　</span></p>
					<p>免责申明　皖公网安备 <span id="recordNo">34018102340321号</span></p>
					<p>技术支持：<span id="technicalSupport">徽章纵视</span></p>
				</div>
			</div>
		</div>
		<script src="/js/jquery.min.js"></script>
		<script src="/js/jquery.pagination.js"></script>
		<script>
			$(document).ready(function(){
				$(".tabUl li").click(function(){
					$(".tabUl li").removeClass('active');
					$(this).addClass('active');
					var index = $(this).index()+13;
					var arr = ['印象石板河','石板河文化'];
					$(".siteChange").html(arr[index-13]);

					var pageCount=1;
					var totalData=1;
					Init(0)

					function Init(pageIndex){
						$.ajax({
							type : "POST",
							url : "/scenery/article/sceneryArticleList",
							data : {articleType:index,palyType:'',articleTitle:'',offset:pageIndex,limit:6},
							async : false,
							success : function(data) {
								if(data != null && data != '') {
									$("#pagination").append("<span>共"+data.total+"条信息</span>")
									totalData=data.total
									if(parseInt(data.total)>=6){
										pageCount=Math.ceil(data.total/6);
									}else{
										pageCount=1;
									}
									var div="";
									for (var i=0;i<data.rows.length;i++){
										div+="<div class=\"spotBox\">"
										$.ajax({
											type : "POST",
											url :  "/common/sysFile/list",
											data : {attachId:data.rows[i].attachId},
											async : false,
											success : function(data) {
												if(data != null && data != '') {
													div+="<img class='spotImg' src='"+data[0].fileUrl+"'/>"
												}
											}
										});
										div+="<p><img src=\"/img/eyes.png\" />"+data.rows[i].articleTitle+"</p>"
										div+="<div class=\"spotHover\">"+data.rows[i].articleTitle+"</div></div>"
									}
									$('.spot').html(div);
								}
							}
						});
					}


					function pageselectCallback(page_id, jq) {
						Init((page_id.getCurrent()-1)*6)
					}
					$("#pagination").pagination( {
						callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
						pageCount: pageCount, //总页数
						totalData: totalData,
						items_per_page: 6, //每页的数据个数
						coping: true,
						homePage: '首页',
						endPage: '末页',
						prev_text: " 上一页",
						next_text: "下一页 ",
					});
				})
				
				$(".tabUl li").eq(0).click();


				$.ajax({
					type : "POST",
					url :  "/system/link/linkList",
					async : false,
					success : function(data) {
						if(data != null && data != '') {
							if(data.code==0){
								var div=""
								for (var i=0;i<data.linkList.length;i++){
									div+="<a href='"+data.linkList[i].linkUrl+"'>";
									$.ajax({
										type : "POST",
										url :  "/common/sysFile/list",
										data : {attachId:data.linkList[i].attachId},
										async : false,
										success : function(data) {
											if(data != null && data != '') {
												div+="<img src='"+data[0].fileUrl+"' /></a>"
											}
										}
									});
								}
								$("#link").after(div)
							}
						}
					}
				});

				$.ajax({
					type : "GET",
					url :  "/sys/sysSet/getSet",
					data : {type:''},
					async : false,
					success : function(data) {
						if(data != null && data != '') {
							if(data.code==0){
								var setDOList=data.setDOList
								for (var i=0;i<setDOList.length;i++){
									$("#"+setDOList[i].setCode).text(setDOList[i].setValue)
								}
							}
						}
					}
				});
			})
			
			
		</script>
	</body>
</html>

